<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>
<body>
<div class="login-container">
    <h2>用户登录</h2>
    <button onclick="send()">发送</button>
    <form th:action="@{/login}" method="post">
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required autofocus>
        </div>
        <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required maxlength="20" minlength="6">
        </div>
        <div class="form-group captcha">
            <label for="captcha">验证码:</label>
            <input type="text" id="captcha" name="captcha" required minlength="4" max="4">
            <img th:src="@{captcha}" alt="验证码">
        </div>
        <div class="form-group">
            <p class="error" th:text="${message}"></p>
            <br/>
            <input type="submit" value="登录">
        </div>
    </form>

    <script type="text/javascript" th:inline="javascript">
        // thymeleaf 获取当前项目路径
        /*<![CDATA[*/
            const ctx = /*[[@{/}]]*/;
        /*]]>*/
        // 当前窗口 不是最外层窗口
        if (window != window.top){
            // 父窗口 window.parent，最外层窗口 window.top
            window.top.location.href = ctx;
        }
    </script>

    <script>
        function send() {
            for (let i = 0; i < 100; i++) {
                fetch("/send", {
                    method: "get",
                    headers: {
                        "Content-Type": "application/json"
                    },

                });
            }
        }
    </script>
</div>
</body>
</html>
